<template>
  <div class="main" @dblclick="revertMap">
    <Echarts
      :data="option"
      ref="map"
      style="width: 100%; height: 100%"
    ></Echarts>
  </div>
</template>

<script>
import "../../assets/js/china";
import Echarts from "@/components/ECharts/ECharts.vue";
import { getChinaMapInfo } from "@/utils/map_utils";
import { getProvinceMapInfo } from "@/utils/map_utils";
import axios from "axios";
export default {
  data() {
    return {
      mapData: {},
      allData: [],
      mydata: [
        { name: "北京", value: 0 },
        { name: "天津", value: 1 },
        { name: "上海", value: 2 },
        { name: "重庆", value: 4 },
        { name: "河北", value: 3 },
        { name: "河南", value: this.randomData() },
        { name: "云南", value: this.randomData() },
        { name: "辽宁", value: this.randomData() },
        { name: "黑龙江", value: this.randomData() },
        { name: "湖南", value: this.randomData() },
        { name: "安徽", value: this.randomData() },
        { name: "山东", value: this.randomData() },
        { name: "新疆", value: this.randomData() },
        { name: "江苏", value: this.randomData() },
        { name: "浙江", value: this.randomData() },
        { name: "江西", value: this.randomData() },
        { name: "湖北", value: this.randomData() },
        { name: "广西", value: this.randomData() },
        { name: "甘肃", value: this.randomData() },
        { name: "山西", value: this.randomData() },
        { name: "内蒙古", value: this.randomData() },
        { name: "陕西", value: this.randomData() },
        { name: "吉林", value: this.randomData() },
        { name: "福建", value: this.randomData() },
        { name: "贵州", value: this.randomData() },
        { name: "广东", value: this.randomData() },
        { name: "青海", value: this.randomData() },
        { name: "西藏", value: this.randomData() },
        { name: "四川", value: this.randomData() },
        { name: "宁夏", value: this.randomData() },
        { name: "海南", value: this.randomData() },
        { name: "台湾", value: this.randomData() },
        { name: "香港", value: this.randomData() },
        { name: "澳门", value: this.randomData() },
      ],
      option: {
        roam: true,
        backgroundColor: "#FFFFFF",
        tooltip: {
          trigger: "item",
          triggerOn: "click",
          // formatter: "{b}",
          formatter: async (arg) => {
            console.log(arg, "111");
            this.$refs.map.changeProvince();
          },
        },

        visualMap: {
          show: true,
          x: "right",
          y: "center",
          splitList: [
            { start: 1, end: 2, label: "aaa" },
            { start: 2, end: 3, label: "bbb" },
            { start: 3, end: 4, label: "ccc" },
          ],
        },
        series: [
          {
            name: "全国地图",
            type: "map",
            mapType: "china",
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: "#009fe8", // 区域边框颜色
                areaColor: "#ffefd5", // 区域颜色
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "blue",
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  borderWidth: 0.5,
                  color: "#800080",
                  borderColor: "#4b0082",
                  areaColor: "#ffdead",
                },
              },
            },
            data: this.mydata,
          },
        ],
      },
    };
  },

  components: {
    Echarts,
  },
  computed: {},
  created() {
    // this.getChinaData();
  },
  mounted() {},
  methods: {
    randomData() {
      return Math.round(Math.random() * 500);
    },
    // async getChinaData() {
    //   const ChinaInfo = getChinaMapInfo();
    //   const { data: res } = await axios.get(
    //     "http://localhost:8080" + ChinaInfo.path
    //   );
    //   console.log(res, "chian");
    //   if (this.allData != []) {
    //     this.allData = [];
    //   }
    //   this.allData = res.features.map((item) => {
    //     return item.properties;
    //   });
    //   console.log(this.allData);
    // },
    // 回到中国地图
    revertMap() {
      // this.getChinaData();
      console.log(123);
      this.$refs.map.closeOption();
      this.$refs.map.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
}
</style>
